<template>
    <h3>axios的应用</h3>
    <n-input type="textarea" v-model:value="reqUrl"></n-input>
    <n-button @click="handleRequest">请求数据</n-button>
    <n-input type="textarea" :value="resultText" readonly></n-input>
    <h3>pinia的应用</h3>
    <div>count:{{ count }} doubleCount: {{ doubleCount }}</div>
    <n-button type="primary" @click="counterStore.increment">增加count</n-button>
    <h3>mixin的应用</h3>
    <div>testText: {{ testText }}</div>
    <div>testObj: {{ testObj }}</div>
    <div>testObjcopyA2: {{ testObjcopyA2 }}</div>
    <hr>
    <div>userStore.user: {{ userStore.user }}</div>
    <div>userStore.msgPro: {{ userStore.msgPro }}</div>
    <div>userStore.messageCnt: {{ userStore.messageCnt }}</div>
    <n-button type="primary" @click="changeTestObj">修改testObj</n-button>
    <n-button class="ml10px" type="primary" @click="userStore.changeUserRole">修改userRole</n-button>
</template>

<script setup lang="ts">
import request from '@/utils/request'
import { useCounterStore, useUserStore } from '@/stores/counter';
import { storeToRefs } from 'pinia';

import testMixin from '@/mixins/testMixin';
const { testObj, testText } = testMixin();

const testObjcopyA = toRef(testObj, 'a')
const testObjcopyA2 = toRef(testObj.a)  //并不相当于上式

function changeTestObj() {
    // 相当于testObj.a += 1;
    testObjcopyA.value += 1;
    testObj.b *= 2;
    testObj.c -= 1;
    
    testObjcopyA2.value += 2;
}

const userStore = useUserStore()
const counterStore = useCounterStore()
const { count, doubleCount } = storeToRefs(counterStore);
let reqUrl = ref('');
let resultText = ref('');
async function handleRequest() {
    const [err, res] = await request({
        url: reqUrl.value,
        method: 'get',
        params: {}
    })

    if (!err) {
        resultText.value = JSON.stringify(res);
    }
    console.log(err)
}
</script>